<?php
    $this->title = $title;
?>

<style type="text/css">
	body{
		background-color:#f2f2f2;
	}
	.hide {
		display: none;
	}
	.weui_dialog {
		width:  50%;
	}

</style>

<div class="weui_panel_access" style="margin-top: 0">
        <div class="weui_tab">
   	    <div class="weui_navbar">
   	        <div class="weui_navbar_item weui_bar_item_on">
   	            个人微信二维码
   	        </div>
   	        <div class="weui_navbar_item">
   	            微信群二维码
   	        </div>
   	    </div>
   	    <div class="weui_tab_bd">
   	    </div>
        </div>
        <div class="weui_panel_bd">
        	<?php foreach($arr_person_qrlist as $list): ?>
<!--                <a class="weui_media_box weui_media_appmsg" href="javascript:void(0);" data-qrcode="--><?//=$list['qrcode']?><!--">-->
	            <div class="weui_media_box weui_media_appmsg weui_panel">
				<div class="weui_media_hd">
	                    <img alt="" src="<?=$list['avatar']?>" class="weui_media_appmsg_thumb">
	                </div>
	                <div class="weui_media_bd">
	                    <h4 class="weui_media_title">
							<span style="font-size: 14px;color:#bbb">
								[<?=$list['province']?>
								<?=$list['city']?>]
							</span>
							<?=$list['username']?></h4>
	                    <p class="weui_media_desc"><?=$list['description']?></p>
	                </div>
					<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_warn">加好友</a>
<!--                </a>-->
				</div>
                <div class="weui_cell_ft"></div>
            <?php endforeach; ?>
        </div>
        <div class="weui_panel_bd hide">
        	<?php foreach($arr_group_qrlist as $list): ?>
<!--                <a class="weui_media_box weui_media_appmsg" href="javascript:void(0);" data-qrcode="--><?//=$list['qrcode']?><!--">-->
					<div class="weui_media_box weui_media_appmsg weui_panel">
					<div class="weui_media_hd">
	                    <img alt="" src="<?=$list['avatar']?>" class="weui_media_appmsg_thumb">
	                </div>
	                <div class="weui_media_bd">
	                    <h4 class="weui_media_title">
							<span style="font-size: 14px;color:#bbb">
								[<?=$list['province']?>
								<?=$list['city']?>]
							</span>
							<?=$list['username']?></h4>
	                    <p class="weui_media_desc"><?=$list['description']?></p>
	                </div>
					<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_warn">加好友</a>
<!--                </a>-->
						</div>
            <?php endforeach; ?>
        </div>
<div class="weui_panel">
        <a id="load_more" href="javascript:void(0);" class="weui_panel_ft">查看更多</a>
</div>
    </div>

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    <div id="qrcode_img" class="weui_dialog_alert hide">
        <div class="weui_mask"></div>
                <div>
                	<img class="weui_dialog" src="" />
                </div>
    </div>
    

    <div class="weui_tabbar" style="position: fixed; margin-top: 60px">
        <a class="weui_tabbar_item" href="/user">
            <div class="weui_tabbar_icon">
                <img alt="" src="./images/icon_nav_cell.png">
            </div>
            <p class="weui_tabbar_label">个人中心</p>
        </a>
        <a class="weui_tabbar_item weui_bar_item_on" href="/qrcode">
            <div class="weui_tabbar_icon">
                <img alt="" src="./images/icon_nav_msg1.png">
            </div>
            <p class="weui_tabbar_label">发布二维码</p>
        </a>
        <a class="weui_tabbar_item" href="/orders/">
            <div class="weui_tabbar_icon">
                <img alt="" src="./images/icon_nav_button.png">
            </div>
            <p class="weui_tabbar_label">购买VIP</p>
        </a>
    </div>



    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript">
    	// tab切换
    	$('.weui_navbar').on('click', '.weui_navbar_item', function () {
    	    if($(this).hasClass('weui_bar_item_on')) {
    	    	return;
    	    }
                $(this).addClass('weui_bar_item_on').siblings('.weui_bar_item_on').removeClass('weui_bar_item_on');
                $('.weui_panel_bd.hide').removeClass('hide').siblings('.weui_panel_bd').addClass('hide');
            });

    	// 弹出/隐藏二维码图片
    	$('.weui_mask').click(function(){
    	    $('#qrcode_img').hide();
    	})
    	$('.weui_btn').on('click', function () {
    	    var qrcode = $(this).attr('data-qrcode');
    	    $('#qrcode_img img').attr('src', '/uploads/' + qrcode);
    	    $('#qrcode_img').show();
    	})

    	// 加载更多
    	var person_page = group_page = 1;
    	$('#load_more').click(function () {
    	    var page = 1;
    	    var type = 2;
    	    if($('.weui_navbar .weui_navbar_item:first').hasClass('weui_bar_item_on')) {
    	        type = 1;
    	        person_page ++;
    	        page = person_page;
    	    }else{
    	        group_page ++;
    	        page = group_page;
    	    }

//    	    console.log(type, page);
    	    $.get(
    	    	'/qrcode/ajaxlist?page='+page+'&type='+type,
    	    	function(res) {
					if(res){
    	    	    var data = eval('('+res+')');
    	    	    var node = '';
    	    	    $.each(data, function(index, val) {
    	    	    	node += '<div class="weui_media_box weui_media_appmsg weui_panel"  data-qrcode="'+val.qrcode+'"><div class="weui_media_hd"><img alt="" src="'+val.avatar+'" class="weui_media_appmsg_thumb"></div><div class="weui_media_bd"><h4 class="weui_media_title">' +
							'<span style="font-size: 14px;color:#bbb">['+val.province+val.city+']</span>' +
							' '+val.username+'</h4><p class="weui_media_desc">'+val.description+'</p></div>' + '<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_warn">加好友</a></div>';
    	    	    });

    	    	    // console.log(node);
    	    	    $('.weui_panel_bd').each(function(index, el) {
    	    	    	if(index+1 == type) {
//    	    	    	    console.log(el)
    	    	    	    $(el).append(node);
    	    	    	}
    	    	    });
						$('#load_more').text('查看更多');
					}else{
						$('#load_more').text('所有数据加载完毕...');
					}
    	    	});
    	});
		$(window).scroll(function () {
			if ($(window).scrollTop() == $(document).height() - $(window).height()) {
				$('#load_more').click().text('加载中...');
			}
		});
    </script>